import { UserApplication as UserApplication, UserPage as UserPage } from 'user/application';
import { MobilePage } from 'components/mobilePage';
import { renderQRCode } from 'admin/weixin/modules/openid';
import { WeiXinService } from 'user/services/weixinService';
import * as mockData from 'user/services/mockData';
import { ShoppingCartService } from 'user/services/shoppingCartService';
import { MemberService } from 'user/services/memberService';
import { guid } from 'share/common';
import ReactDOM = require('react-dom');
import { IService, ServiceConstructor } from 'maishu-chitu';
import * as chitu from "maishu-chitu";
import React = require("react");

class DesignTimeUserPage extends UserPage {
    //  createService<T extends IService>(type?: ServiceConstructor<T>): T;
    createService<T extends IService>(type?: chitu.ServiceConstructor<T>): T {
        let service = super.createService<T>(type);
        console.assert(this.app instanceof DesignTimeUserApplication);
        if ((this.app as DesignTimeUserApplication).enableMock) {
            service = mockService<T>(service);
        }
        return service;
    }
}

export class DesignTimeUserApplication extends UserApplication {
    private screenElement: HTMLElement;

    private _enableMock: boolean;
    private designNodeId = guid();

    constructor(screenElement: HTMLElement, enableMock?: boolean) {
        super(screenElement);

        this.screenElement = screenElement;
        this.pageType = DesignTimeUserPage;
        this._enableMock = enableMock == null ? false : enableMock;

        console.assert(this.parser != null)
        this.parser.actions = this.parser.actions || {}
        this.parser.actions['user_login'] = this.parser.actions['user_login'] ||
            function (page: chitu.Page, app: DesignTimeUserApplication) {
                ReactDOM.render([
                    <div key={10} className="text-center" style={{ paddingTop: 100 }}>
                        <b>该页面需要登录后才能显示</b>
                        <br />
                        <b>请使用微信扫描二维登录客户端</b>
                    </div>,
                    <div key={20} className="text-center" style={{ paddingTop: 20 }}
                        ref={(e: HTMLElement) => {
                            if (!e) return;
                            renderQRCode({
                                element: e,
                                mobilePageName: 'userLogin',
                                async  callback(code: string) {
                                    let weixin = page.createService(WeiXinService);
                                    let result = await weixin.login(code);
                                    page.close();

                                    app.currentPage.show();
                                    app.currentPage.reload();
                                    return result;
                                }
                            })
                        }}>
                    </div>
                ], page.element);
            }

        this.parser.actions[this.designNodeId] = async function (page: UserPage, app: DesignTimeUserApplication) {
            let pageData = { controls: [] };//app.designPageNode.pageData || 
            let color = await app.styleColor();
            ReactDOM.render(<MobilePage pageData={pageData}
                elementPage={page}
                styleColor={color}
            />, page.element);

        }
    }
    // get designPageNode(): PageNode & { pageData?: PageData } {
    //     // return this.nodes[this.designNodeId];
    //     return {
    //         name: this.designNodeId,
    //         action: this.parser.actions[this.designNodeId]
    //     }
    // }
    setDesignPageAction(action: chitu.Action) {
        this.parser.actions[this.designNodeId] = action
    }
    get enableMock() {
        return this._enableMock;
    }
    showDesignPage() {
        this.showPage(this.designNodeId);
    }
    createPageElement(pageName: string, containerName: string) {
        let element = super.createPageElement(pageName, containerName);
        this.screenElement.appendChild(element);
        return element;
    }
    createService<T extends IService>(type?: ServiceConstructor<T>): T {
        let service = super.createService<T>(type);
        if (this._enableMock) {
            service = mockService<T>(service);
        }
        return service;
    }
}

function mockService<T>(service: T): T {
    if (service instanceof ShoppingCartService) {
        service.items = async () => {
            return mockData.shoppingCartItems;
        }
        service.calculateShoppingCartItems = async () => {
            return mockData.shoppingCartItems;
        }
    }
    else if (service instanceof MemberService) {
        service.store = async () => {
            let store: Store = { Id: guid(), Name: '', ImagePath: "" }
            return store;
        }
    }

    return service;
}
